<template>
    <div>
        <div class="tushu"><span>图书商城</span><span  class="shu" @click="router.push('/shujia')">我的书架</span></div>
        <div>
            <van-search v-model="value" placeholder="请输入搜索关键词" />
        </div>
        <div class="listbox">
            <div v-for="item in filterbooklist" :key="item.id" class="list">
                <div :style="{width:'80%'}">
                    <img style="width: 100%;" :src="item.img" alt="">
                </div>
                <div @click="addshuji(item)"><div style="background: red" >+</div></div>
                <div>{{item.name}}</div>
                <div>{{item.price}}</div>
                <div>{{item.publish}}</div>
                <div>{{item.desc}}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { useStore } from 'vuex';
import { onMounted, ref,computed } from 'vue';
import{useRouter}from 'vue-router'
const router=useRouter()
const tushulist=ref([])
const value=ref('')
const store=useStore()
const booklist=computed(()=>store.state.booklist)

const filterbooklist=computed(()=>{
    if(!value.value){
        return tushulist.value
    }else{
        return tushulist.value.filter(item=>item.name.includes(value.value))
    }
})
const addshuji=(item)=>{
    store.commit('addbook',item)
    
}

const handletushu=()=>{
    axios.get('http://localhost:3001/bookList').then(res=>{
        tushulist.value=res.data
        console.log(tushulist.value);
        
    })
}
onMounted(()=>{
    handletushu()
})
</script>

<style scoped>
   .tushu{
     width: 100%;
     height: 50px;
     background: red;
     font-size: 20px;
     color: white;
     text-align: center;
     line-height: 50px;
   }
   .shu{
    font-size:12px ;
    float: right;
   }
   .list{
    width: 45%;
   }
   .listbox{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
   }

   </style>